<template>
  <div class="box">
      <input v-model="login" type="text" name="" id="" placeholder="请输入账号">
      <input v-model="password" type="password" name="" id="" placeholder="请输入密码">
      <button @click="fn">登录</button>
  </div>
</template>

<script>
import axios from "axios"
import { Notify } from 'vant';
export default {
    name:"Login",
    data(){
        return{
            login:"",
            password:"",
            arr:[]
        }
    },
    components:{

    },
    methods:{
        async fn(){
            let {data} = await axios.get("./mine.json")
            this.arr=data.login
            if(this.login === this.arr[0].account && this.password === this.arr[0].password){
                Notify({ type: 'success', message: '登录成功' });
                this.$router.push("/mine")
            }else{
                Notify({ type: 'danger', message: '密码或者账号不正确，请重新登录' });
            }
            console.log(this.arr)
            
        }
    },
    created(){

    }
}
</script>

<style scoped>
.box{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.box input{
    width: 6rem;
    height: .8rem;
    margin-top:.4rem;
}
.box button{
    width: 6rem;
    height: .8rem;
    border:red solid 1px;
    background: red;
    color:#fff;
    margin-top:.3rem;
}
</style>